import Taro, {Component} from "@tarojs/taro";
import { AtCurtain } from 'taro-ui'
import {View, Image, Text, RichText, Input} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime} from '../../utils/common'

import './index.less'
import './welfare_detail.less'

import banner_03 from '../../assets/img/banner_03.jpg'
import icon_71_on from "../../assets/img/icon_71_on.png";

// 公益-发起人详情
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class WelfareDetail extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    info: {},
    isOpened: false,
    optionArr: [1,5,10,20,50,100,150],
    currentOption:0,
    amount: 1,
    showInput: false,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'投票' })
    let id = this.$router.params.id
    this.getPublicWelfareInfo(parseInt(id))
  }

  getPublicWelfareInfo(id:number){
    let { PublicWelfareStore } = this.props.stores
    PublicWelfareStore.getPublicWelfareInfo({
      formId:id,
      callback: res => {
        this.setState({
          info: toJS(res)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  onClose() {
    this.setState({ isOpened: false })
  }

  selectAmount(amount: number, index: number) {
    this.setState({ currentOption: index })
    if(amount === -1){
      this.setState({ showInput: true })
    }else {
      this.setState({ amount, showInput: false })
    }
  }

  inputChange(e) {
    let amount = e.detail.value
    this.setState({ amount: Math.abs(amount) })
  }

  // 支持按钮
  btnSupport() {
    this.setState({ isOpened: true })
  }

  // 支持付款按钮
  support() {
    let { amount } = this.state
    let publicWelfareId = parseInt(this.$router.params.id)
    if(!publicWelfareId || !amount){ getRuntime().showToast('参数错误,请重试~'); return }
    let { PublicWelfareStore } = this.props.stores
    PublicWelfareStore.publicWelfareBuy({
      form: {
        publicWelfareId,
        payMoney: amount
      },
      callback: res => {
        getRuntime().wxPay(res, () => {
          getRuntime().showToast('捐款成功,十分感谢您的爱心~')
        })
      }
    })
  }

  render() {
    let { info,isOpened,optionArr,showInput,currentOption } = this.state
    return (
      <View className='welfare-record-detail'>
        <Image src={banner_03} className='header-pic' />
          <View className='record-info person-info'>
            <Image src={info.logoImg} className='icon-b' />
            <View className='info'>
              <View className='title'>{info.name}</View>
              <View className='list-desc'>
                已获得 <Text className='color'>{info.allCountPeople}</Text>人支持
              </View>
            </View>
            <Image className='btn-support' src={icon_71_on}  onClick={this.btnSupport.bind(this)} />
          </View>

        <View className='article'>
          <View className='interval' />
          <View className='column-title content-30'>
            <Text className='column-name'>申请人故事</Text>
          </View>
          <View className='welfare-article'>
            <RichText className='rich-text' nodes={info.description} />
          </View>

          <View className='interval' />
          <View className='column-title content-30'>
            <Text className='column-name'>项目介绍</Text>
          </View>
          <View className='welfare-article'>
            {info.introduce}
          </View>

          <View className='footer-block' />
          <View className='btn-big-support' onClick={this.btnSupport.bind(this)}>
            <View className='btn'>支持TA</View>
          </View>
        </View>

         {/*  支持金额选择 */}
        <View className='report-amount'>
          <AtCurtain
            isOpened={isOpened}
            onClose={this.onClose.bind(this)}
          >
            <View className='content'>
              <View className='title'>请选择支持金额</View>
              <View className='con'>
                {
                  optionArr.map((item,index) => {
                    return(
                      <View className={currentOption===index?'option option-active':'option'} key={index} onClick={this.selectAmount.bind(this,item,index)}>{item}元</View>
                    )
                  })
                }
                <View className={currentOption===-1?'option option-active':'option'} onClick={this.selectAmount.bind(this,-1,-1)}>其他</View>
              </View>
              <Input className='amount' placeholderClass='placeholder_class' placeholder='请输入资助金额'
                     style={{display:!showInput?'none':'block'}}
                     type='number'
                     onChange={this.inputChange.bind(this)}
              />
              <View className='btn-report' onClick={this.support.bind(this)}>立即支持</View>
            </View>
          </AtCurtain>
        </View>
      </View>
    )
  }
}

export default WelfareDetail
